<template>
  <div class="p-list">
    <dl>
      <dd
        v-for="item of nav"
        :key="item.name"
        :class="[item.name, item.active ? 's-nav-active' : '']"
      >{{ item.txt }}</dd>
    </dl>

    <ul>
      <item 
        v-for="(item, index) of list"
        :key="index"
        :meta="item"
        :idx="index"
      />
    </ul>
  </div>
</template>

<script>
import Item from './product.vue'

export default {
  components: {
    Item
  },
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      nav: [
        {
          name: "s-default",
          txt: '智能排序',
          active: true
        },
        {
          name: "s-price",
          txt: '价格最低',
          active: false
        },
        {
          name: "s-visit",
          txt: '人气最高',
          active: false
        },
        {
          name: "s-comment",
          txt: '评价最高',
          active: false
        }
      ]
    }
  }, 
  async asyncData({app}) {
    let {data} = await app.$axios.get('searchList')
    return {items: data.list}
  },
  mounted() {
    console.log("list", this.list)
  },
  methods: {
    navSelect: function() {
      console.log('select')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .p-list
    margin-top 10px
    background-color #ffffff
    border 1px solid #e5e5e5
    border-radius 4px
    color #333
    font-size 14px
    line-height 20px
    & > dl
      padding-top 15px
      padding-bottom 2px
      padding-left 20px
      dd
        display inline-block
        min-width 96px
    ul
      padding 11px 20px
</style>
